<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TestEdge</title>



<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery.jscrollpane.css" />
<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_testEdge.css" />
<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/gradebook_table_scroll.css" />

<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery-ui.js"></script>	
<!--script type="text/javascript" src="/ce-static-testedge/common/jscripts/common.js"></script-->	
<!--common javascript-->
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/common.js"></script>
<!--custom scroll -->
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.mousewheel.js"></script>

<!--common javascript-->

<!--common javascript-->


<script type="text/javascript" src="/ce-static-testedge/common/jscripts/knockout-2.2.1.js"></script>
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/knockout.mapping-latest.js"></script>
<!--script type="text/javascript" src="/ce-static-testedge/common/jscripts/underscore-min.js"></script-->

<script type="text/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_curriculumPlanViewServices.js"></script>
<script type="text/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_curriculumPlanView.js"></script>


<script>
    jQuery(document).ready(function(e) {     
        console.log("Ready called");         
        initialize();
    });
    
</script>

<style>
		.termTab {
		background:url(/ce-static-testedge/common/images/tabBg.png) repeat-x bottom;
		/*font-weight: normal;
		color: #4c4c4c;*/
		cursor: hand;
		}
		.termTab a:hover {
		background: url(/ce-static-testedge/common/images/tabActiveBg.png) repeat-x bottom;
		}
		.termTab a:active {
		background: url(/ce-static-testedge/common/images/tabActiveBg.png) repeat-x bottom;
		}
		.tabBg{width:895px; height:5px; background: url(/ce-static-testedge/common/images/tabActiveBg.png) repeat-x bottom;}
		
		.ui-tabs {
			border-top: 0px solid #CCC !important;
		 padding: 0em !important;
		}
		
		element.style {
		border-top: 0px solid #CCC !important;
		margin: 10px 0px 0px 0px;
		}
		.ui-autocomplete
	    {
	        position:absolute;
	        cursor:default;
	        z-index:4000 !important
	    }
		
		.statusComplete
		{
		   
		   background-color:#ABEB8D !important;		   
		
		}
		.statusPending
		{
			background-color:#FFE191!important;		
					 
		    
		}
		
		.subSubjectTriangle 
			{				
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 10px 7.5px 0 7.5px;
				border-color: #666666 transparent transparent transparent;
			}
		
	</style>

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style_IE.css" />
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.placeholder.min.js"></script>
<script>
	$(function() {
	$('input, textarea').placeholder();
	});
</script>
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/style_IE_8.css" />
<![endif]-->
</head>

<body>

<!--BO Main Content -->
<div class="contentWrapper">
  <div class="wrapper">
    <div class="testEdgeMainContent" style="height: 575px ! important;">
      <h1 class="titleMain" style="margin-bottom: -24px"> <span class="floatleft">View Curriculum Plan</span><a href="#."  onclick="showHelp(event)" style="margin-top: 10px; margin-right: 13px"  class="iconHelp seletc floatright"></a></h1>
          <div  class="help"></div>
		    <a class="floatright" href="#" style="margin-right: 10px" onclick="retrunToAcademicYear(event)"> &lt; Back to Academic Year</a>   
      <div class="titleSection">       
           <div class="fontsize12 floatleft padding5">
                  
                  <div class="title2 bold ">Curriculum Plan: Academic Year 2012 - 2013</div>
           </div>
         
          <br class="clearBoth" />    
      </div>
      
      <!--BO Main Facilities -->
      <div class="container tab-container">   
          <div class="scroll-pane25" style="height: 480px ! important;">
          	
          	<div id="accordion"  data-bind="foreach: curriculumArr, jqAccordion: { updateOn: curriculumArr, options: { active: false, collapsible: true, heightStyle: 'content' } }"> 
          	
             <!--div id="accordion"-->          
        	   <!--pre primary--> 
				            
                <h3 class="floor marginNone"  data-bind="css:applyCssKo()"> 
                   <span class="floatleft bold marginRight5" data-bind="text:gradeTitle">Grade 1</span>                 
                   <span class="floatleft marginLeft5 italicText" data-bind="text:status"> Completed</span>
                </h3>
                
               	<div class="customAccordian paddingNone">
           
                 <table border="1" class="schoolEventstable">
                    <thead>
                    <tr class="border-bottom">
                        <th class="header" style="width:20%;">Subject</th>
                        <th class="header" style="width:10%;">Periods<br>(per week)</th>
                        <th class="header" style="width:15%;">ClassEdge Periods<br>(per week)</th>
                        <th class="header" style="width:10%;">Labs<br>(per week)</th>
                        <th class="header" style="width:25%;">Teacher Responsible for<br> Curriculum Plan</th>
                        <th class="header" style="width:15%;">Status</th>  
                    </tr>
                    </thead>
                   </table  >
                    <!-- ko foreach: data --> 
                    <table border="1" class="schoolEventstable">
                    <tr>
                        <td style="width:20%;"><span data-bind="text:subjectTitle"></span><!-- ko if: isOptional() --><span style="color: orange"> (optional)</span><!--/ko--> <!-- ko if: subSubjects().length!=0 --><div style="position:absolute;margin-top: 20px" ><span class="subSubjectTriangle"></span></div><!--/ko--></td>
                        <td style="width:10%;" data-bind="text:periodPerWeek">6</td>
                        <td style="width:15%;" data-bind="text:cePeriodPerWeek">6</td>
                        <td style="width:10%;" data-bind="text:labPeriodPerWeek">6</td>
                        <td style="width:25%;" >
                        	<span data-bind="text:teacherName"></span> 
                        	<!-- ko if: subjectType()!=3 &&  subSubjects().length==0 --> 
                        	 <a href="#" class="editIcon floatright " style="display:block" data-bind="click:$root.changeTeacherModel"></a> 
                        	 <!-- /ko -->
                        </td>
                      
                         <!-- ko if: planStatus()==2 && subjectType()!=3 -->  
                         
                         <td style="width:15%;"><!-- ko if:subSubjects().length==0 --><a href="#" class="viewPlan" data-bind="click:$root.openViewPlanModel">View Plan</a><!-- /ko --></td>
                        <!-- /ko -->
                         <!-- ko if: !planStatus() && subjectType()!=3 -->  
                        <td style="width:15%;"><!-- ko if:subSubjects().length==0 -->Not Started<!-- /ko --></td>
                        <!-- /ko -->
                         <!-- ko if: planStatus()==1 && subjectType()!=3 -->  
                        <td style="width:15%;"><!-- ko if:subSubjects().length==0 -->Saved As Draft<!-- /ko --></td>
                        <!-- /ko -->
                        <!-- ko if:  subjectType()==3 -->  
                        <td style="width:15%;"><!-- ko if:subSubjects().length==0 -->Not Applicable<!-- /ko --></td>
                        <!-- /ko -->
                    </tr>
                      <!-- ko if: subSubjects().length>0 -->  
                    <!-- ko foreach: subSubjects --> 
                     <tr >
                        <td style="width:20%;background-color: #EBEBEB" data-bind="text:subjectTitle">English</td>
                        <td style="width:10%;background-color: #EBEBEB" data-bind="text:periodPerWeek">6</td>
                        <td style="width:15%;background-color: #EBEBEB" data-bind="text:cePeriodPerWeek">6</td>
                        <td style="width:10%;background-color: #EBEBEB" data-bind="text:labPeriodPerWeek">6</td>
                        <td style="width:25%;background-color: #EBEBEB" >
                        	<span data-bind="text:teacherName"></span> 
                        	<!-- ko if: subjectType()!=3 --> 
                        	 <a href="#" class="editIcon floatright " style="display:block" data-bind="click:$root.changeTeacherModel"></a> 
                        	 <!-- /ko -->
                        </td>
                      
                         <!-- ko if: planStatus()==2 && subjectType()!=3 -->  
                         
                         <td style="width:15%;background-color: #EBEBEB"><a href="#" class="viewPlan" data-bind="click:$root.openViewPlanModel">View Plan</a></td>
                        <!-- /ko -->
                         <!-- ko if: !planStatus() && subjectType()!=3 -->  
                        <td style="width:15%;background-color: #EBEBEB">Not Started</td>
                        <!-- /ko -->
                         <!-- ko if: planStatus()==1 && subjectType()!=3 -->  
                        <td style="width:15%;background-color: #EBEBEB">Saved As Draft</td>
                        <!-- /ko -->
                        <!-- ko if:  subjectType()==3 -->  
                        <td style="width:15%;background-color: #EBEBEB">Not Applicable</td>
                        <!-- /ko -->
                    </tr>
                    
                    <!-- /ko -->
                    <!-- /ko -->
                    
                    
                    
                    
                    
                    </table>
                     <!-- /ko -->      
                     
                
                   
                </div>

        	  


                
      <!--EO Add Facilities --> 
      
    </div>
           </div>
  </div>
</div>
</div>
</div>
<!--EO Main Content -->

<div id="view-Plan" title="Grade 2 Geography" >

 <div class="sectionContainer">
             <h2 class="title2" id="teacherNameDialog" style="margin: 10px;">Mrs. R. Chintamani</h2>
             
             <div id="tabspopup">             
             <div  data-bind="jqTabs: { fx: { opacity: 'toggle' } }" >
              <ul style="margin: 10px;" >                
                  <!-- ko foreach: planArr -->
                <li class="termTab" style="background:url(/ce-static-testedge/common/images/tabBg.png) repeat-x bottom; cursor: pointer;" onclick="changeBgscoTemBg(this)" id="tabid"><a  data-bind="attr:{href: '#tabs1'},click:changeTabModel"><span data-bind="text:termTitle"></span>(<span data-bind="text:titleDate" style="font-size : 10px;"></span>)</a></li>
                <!-- /ko -->
              </ul>             
              </div>
          	   <div id="tabs1" class="whiteBg" style="border-top: 1px solid #CCC;margin: 10px 0px 0px 0px;">
          	   	
          	   	   <div  class="tabBg" style="margin: 10px;"></div>
            		 <div class="padding">
                     
                       <div class="heading">
                       <span class="width256"> Chapter Name </span>
                       <span class="width210"> No. of Teaching Periods </span>
                       <span> No. of Test Periods </span>
                       <!--span class="floatright" style="margin-top:-2px;"><a href="#." class="te-button buttonFacilities">Print</a></span-->
                       <!--span class="floatright" style="margin-top:-2px;"><a href="#." class="te-button buttonFacilities" id="expandAccord">Expand All</a></span-->
                      </div>	
                      
                      <div class="padding border paddingTopNone"  data-bind="with: currentPlanVo">
                      	
                      	
                      	
                     	 <div class="scroll-pane16" >
					    
					     
					      <!--div id="accordionSortable"-->      
					      	
					      		<div id="accordion"  data-bind="foreach: planContentArr, jqAccordion: { updateOn: planContentArr, options: { active: false, collapsible: true, heightStyle: 'content' } }">
					      	                                                             
                                <!--div class="group" id="item0"-->
                                    <h3 class="floorAdded bold" data-bind="click : loadChapterData">
                                        <span class="floatleft title chapterName" data-bind="text:chapterTitle">Chapter 1 - Intro to Geography</span>
                                        <span class="floatleft" data-bind="text:totalTeachingPeriod">2</span>
                                        <span class="floatleft" style="margin-left:200px;" data-bind="text:totalTestPeriod">1</span>
                                        
                                       
                                    </h3>
                                    
                                    <div class="gradeData">                                    
                                        <div class="floatleft">
                                          <label class="displayBlock bold"> Contents</label> 
                                          <div class="width256"  data-bind="text:contents">
                                           
                                          </div>
                                        </div>
                                        
                                        <div class="floatleft marginLeft20">
                                          <label class="displayBlock bold">Objective</label>
                                          <div class="width256" data-bind="text:objective">
                                           
                                          </div>
                                        </div>
    
                                        <div class="floatleft marginLeft20">
                                          <label class="displayBlock bold">Outcome</label>
                                          <div class="width256" data-bind="text:outcome">
                                            <!--ul class="padding5">
                                              <li > Lorem Ipsum dolor sit amet nunqum at avet.</li>                                             
                                            </ul-->
                                          </div>
                                        </div>
                                    </div>
                           </div> <!--+ Accordian Ends+-->      
           			     </div>
                     
                      </div>
                      </div>
                     <div class="bottomButton"> 
                      <a href="#" class="te-button buttonBlue floatleft" data-bind="click:closeView" id="ok">Close</a> 
                  
				      <div class="clearBoth"></div>
				    </div>
          	   </div>
             
            </div>  

                            
         </div>
</div>

<!--BO Popup Content Create Section  -->
<div id="assign-roll" title="Change Teacher">
	<div class="sectionContainer">
		<div class="floatleft">		
				<select class="select width300" data-bind="options: $root.filteredTeacherArr, optionsText: 'fullName', optionsValue:'userId',value:selectedUserId"></select>     
		</div>
		<div class="clearBoth"></div>
	</div>
	<div class="bottomButton">
		<a href="#" class="te-button buttonBlue floatleft" id="saveInfo" data-bind="click:$root.saveChangedTeacher">Update</a><a href="#" class="te-button buttonGray floatleft" id="cencelBox">Cancel</a>
		<div class="clearBoth"></div>
	</div>
</div>

		



</body>
</html>
